<!-- 头部公用 -->
<template>
  <div class="">
    <div class="headBack" v-show="!drawerlogin">
      <el-row class="container">
        <el-col :span="24">
          <!-- pc端导航 -->
          <div class="headBox">
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              :router="true"
            >
              <el-menu-item index="/Home"
                ><svg class="icon huiyuan" aria-hidden="true">
                  <use xlink:href="#icon-shouyefill"></use>
                </svg>
                首页</el-menu-item
              >
              <el-submenu index="/Share">
                <template slot="title"
                  ><svg class="icon huiyuan" aria-hidden="true">
                    <use xlink:href="#icon-fenlei"></use>
                  </svg>
                  分类</template
                >
                <el-menu-item
                  v-for="(item, index) in classListObj"
                  :key="'class1' + index"
                  :index="'/Share?classId=' + item.id"
                  >{{ item.name }}</el-menu-item
                >
              </el-submenu>
              <el-menu-item index="/Reward" class="el-menu-item"
                ><svg class="icon huiyuan" aria-hidden="true">
                  <use xlink:href="#icon-dongtai"></use></svg
                >时间轴</el-menu-item
              >
              <el-menu-item index="/Friendslink"
                ><svg class="icon huiyuan" aria-hidden="true">
                  <use xlink:href="#icon-lianjie1"></use></svg
                >友链</el-menu-item
              >
              <el-menu-item index="/Write" v-show="haslogin"
                ><svg class="icon huiyuan" aria-hidden="true">
                  <use xlink:href="#icon-bianjisekuai"></use></svg
                >写动态</el-menu-item
              >
              <el-menu-item index="/About" v-show="!haslogin"
                ><svg class="icon huiyuan" aria-hidden="true">
                  <use xlink:href="#icon-denglu"></use></svg
                >登录</el-menu-item
              >
              <div class="userInfo">
                <div v-show="haslogin" class="haslogin">
                  <el-dropdown trigger="hover">
                    <span class="el-dropdown-link">
                      <i class="el-icon-s-custom"></i> 个人中心
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>
                        <i class="el-icon-s-custom"></i
                        ><a href="#/UserInfo">个人中心</a>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <i class="el-icon-switch-button"></i
                        ><a href="javascript:void(0);" @click="userlogout"
                          >退出登录</a
                        >
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
            </el-menu>
          </div>
          <!-- 移动端导航栏 -->
          <div class="mobileBox" v-show="!drawerlogin">
            <svg
              class="icon"
              v-show="!drawerlogin"
              aria-hidden="true"
              @click="drawerlogin = true"
              type="primary"
              style="width: 40px; height: 60px"
            >
              <use xlink:href="#icon-yidongdaohang"></use>
            </svg>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- <div class="headImgBox">
      <el-carousel indicator-position="outside" :interval="4000">
        <el-carousel-item v-for="(image, index) in images" :key="index">
          <div
            class="carousel-image"
            :style="{ backgroundImage: `url(${image.imageUrl})` }"
          >
            
            <div class="carousel-title">{{ image.imageTitle }}</div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div> -->
    <div class="headImgBox">
      <div
        class="image-container"
        v-for="(image, index) in images"
        :key="index"
      >
        <img :src="image.imageUrl" alt="Image" class="carousel-image" />
        <div class="carousel-title">{{ image.imageTitle }}</div>
      </div>
    </div>
    <el-drawer
      title="导航栏"
      class="headtitle"
      :visible.sync="drawerlogin"
      :with-header="false"
    >
      <div class="headimage">
        <img src="http://s0ywtn7ay.bkt.clouddn.com/1694846282246.jpg" alt="" />
      </div>
      <div class="headname">
        <p>随行者常至</p>
      </div>
      <div class="headtext">
        <p>三更灯火五更鸡</p>
        <p>正是男儿读书时</p>
      </div>
      <div class="headline"></div>
      <div class="headmeum">
        <el-menu
          default-active="1-4-1"
          class="el-menu-vertical-demo my-menu"
          @open="handleOpen"
          @close="handleClose"
          :router="true"
        >
          <el-menu-item index="/Home">
            <template slot="title">
              <svg class="icon huiyuan" aria-hidden="true">
                <use xlink:href="#icon-shouyefill"></use>
              </svg>
              <span slot="title">首页</span>
            </template>
          </el-menu-item>

          <el-submenu index="/Share">
            <span slot="title"
              ><svg class="icon huiyuan" aria-hidden="true">
                <use xlink:href="#icon-fenlei"></use></svg
              >分类</span
            >
            <el-menu-item
              v-for="(item, index) in classListObj"
              :key="'class1' + index"
              :index="'/Share?classId=' + item.id"
              >{{ item.name }}
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="/Reward">
            <svg class="icon huiyuan" aria-hidden="true">
              <use xlink:href="#icon-dongtai"></use>
            </svg>
            <span slot="title">时间轴</span>
          </el-menu-item>
          <el-menu-item index="/Friendslink">
            <svg class="icon huiyuan" aria-hidden="true">
              <use xlink:href="#icon-lianjie1"></use>
            </svg>
            <span slot="title">友链</span>
          </el-menu-item>
          <el-menu-item index="/Write" v-show="haslogin">
            <svg class="icon huiyuan" aria-hidden="true">
              <use xlink:href="#icon-lianjie1"></use>
            </svg>
            <span slot="title">写说说</span>
          </el-menu-item>
          <el-menu-item index="/About" v-show="!haslogin">
            <svg class="icon huiyuan" aria-hidden="true">
              <use xlink:href="#icon-denglu"></use>
            </svg>
            <span slot="title">登录</span>
          </el-menu-item>
          <div class="headline"></div>
          <br />
          <span class="haslogin-info-two" v-show="haslogin"
            ><a href="#/UserInfo">个人中心</a></span
          >
          <br />
          <br />
          <span class="haslogin-info-two" v-show="haslogin"
            ><a href="javascript:void(0);" @click="userlogout"
              >退出登录</a
            ></span
          >
        </el-menu>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { logout } from "../api/user";
import { removeToken } from "../utils/auth";
import { getCategoryList } from "../api/category";
import ImagesApi from "../api/images";
import VisitCountMixin from "../utils/VisitCountMixin";
export default {
  mixins: [VisitCountMixin],
  data() {
    //选项 / 数据
    return {
      //移动端导航栏
      isCollapse: true,
      drawerlogin: false,
      imageInfo: {},
      images: [], // 存储图片数据
      intervalId: null, // 定时器 Id

      userInfo: "", //用户信息
      haslogin: false, //是否已登录
      classListObj: "", //分类
      activeIndex: "/", //当前选择的路由模块
      state: "", //icon点击状态
      pMenu: true, //手机端菜单打开
      // path:'',//当前打开页面的路径
      input: "", //input输入内容
      headBg: "url(static/img/headbg05.jpg)", //头部背景图
      headTou: "", //头像
      projectList: "", //项目列表
      textIndex: 0,
      text: "",
      isDeleting: false,
    };
  },
  watch: {},
  beforeDestroy() {
    clearInterval(this.intervalId); // 取消定时器
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //获取背景图片和title
    // getImageTitle() {
    //   ImagesApi.getImages().then((response) => {
    //     //console.log(response);
    //     this.imageInfo = response;
    //   });
    // },

    getAllImageTitle() {
      ImagesApi.getAllImage().then((response) => {
        //console.log(response);
        this.images = response;
      });
    },

    handleOpen(key, keyPath) {
      //分组菜单打开
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      //分组菜单关闭
      // console.log(key, keyPath);
    },
    searchChangeFun(e) {
      //input change 事件
      // console.log(e)
      if (this.input == "") {
        this.$store.state.keywords = "";
        this.$router.push({ path: "/" });
      }
    },
    getCategoryList() {
      getCategoryList().then((response) => {
        this.classListObj = response;
      });
    },
    handleSelect(key, keyPath) {
      //pc菜单选择
      //    console.log(key, keyPath);
    },
    logoinFun: function (msg) {
      //用户登录和注册跳转
      // console.log(msg);
      localStorage.setItem("logUrl", this.$route.fullPath);
      // console.log(666,this.$router.currentRoute.fullPath);
      if (msg == 0) {
        this.$router.push({
          path: "/Login?login=0",
        });
      } else {
        this.$router.push({
          path: "/Login?login=1",
        });
      }
    },
    // 用户退出登录
    userlogout: function () {
      var that = this;
      this.$confirm("是否确认退出?", "退出提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(that.$route.path);

          logout().then((response) => {
            removeToken();
            localStorage.removeItem("userInfo");
            that.haslogin = false;
            // window.location.reload();
            that.$message({
              type: "success",
              message: "退出成功!",
            });
            setTimeout(() => {
              location.reload(); // 或者使用 this.$router.push({ path: '/' }) 来跳转到当前页面
            }, 1000);
            if (that.$route.path == "/UserInfo") {
              that.$router.push({
                path: "/About",
              });
            }
          });
        })
        .catch(() => {
          //
        });
    },
    routeChange: function () {
      var that = this;
      that.pMenu = true;
      this.activeIndex = this.$route.path == "/" ? "/Home" : this.$route.path;
      if (localStorage.getItem("userInfo")) {
        //存储用户信息
        that.haslogin = true;
        that.userInfo = JSON.parse(localStorage.getItem("userInfo"));
        // console.log(that.userInfo);
      } else {
        that.haslogin = false;
      }
      //获取分类
      this.getCategoryList();

      if (
        (this.$route.name == "Share" || this.$route.name == "Home") &&
        this.$store.state.keywords
      ) {
        this.input = this.$store.state.keywords;
      } else {
        this.input = "";
        this.$store.state.keywords = "";
      }
    },
  },
  components: {
    //定义组件
  },
  component: {},
  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: "routeChange",
  },
  created() {
    //this.getImageTitle();
    this.getAllImageTitle();
    // 每隔 60 秒重新获取一次图片数据
    // this.intervalId = setInterval(this.getAllImageTitle, 60 * 1000);
    //生命周期函数
    //判断当前页面是否被隐藏
    var that = this;
    var hiddenProperty =
      "hidden" in document
        ? "hidden"
        : "webkitHidden" in document
        ? "webkitHidden"
        : "mozHidden" in document
        ? "mozHidden"
        : null;
    var visibilityChangeEvent = hiddenProperty.replace(
      /hidden/i,
      "visibilitychange"
    );
    var onVisibilityChange = function () {
      if (!document[hiddenProperty]) {
        //被隐藏
        if (that.$route.path != "/DetailShare") {
          if (localStorage.getItem("userInfo")) {
            that.haslogin = true;
          } else {
            that.haslogin = false;
          }
        }
      }
    };
    document.addEventListener(visibilityChangeEvent, onVisibilityChange);
    // console.log();
    this.routeChange();
  },
};
</script>

<style lang="less">
.el-dropdown-link {
  font-size: 1rem;
  color: white;
}
.el-submenu .el-menu-item {
  font-weight: bold;
}
.haslogin-info-two {
  font-weight: bold;
}
.headmeum {
  margin-top: 5%;
  text-align: center;
}
.headline::after {
  content: "";
  display: block;
  height: 2px;
  background-color: #ccc;
  margin-top: 5%;
}
.headtext {
  text-align: center;
  margin-top: 5%;
  font-size: 1rem;
  color: white;
}
.headname {
  margin-top: 5%;
  text-align: center;
}
.headname p {
  color: #ff9100 !important; /* 设置文字颜色为红色 */
  font-size: 18px; /* 设置文字大小为18像素 */
  font-weight: bold; /* 设置文字加粗 */
}
.headimage {
  width: 120px;
  height: 120px;
  // background-color: red;
  margin-left: 31%;
  margin-top: 15%;
  border-radius: 50%;
}
.headimage img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.el-drawer {
  width: 75% !important;
  background: rgba(194, 194, 194, 0.445) !important;
  backdrop-filter: blur(15px) !important;
}
.drawerlogin {
  margin-top: 2.5%;
}
.v-modal {
  width: 100%;
  height: 0;
}
//分类
.el-menu {
  background-color: transparent !important;
}
.el-menu--horizontal .el-menu .el-menu-item {
  width: 140px;
}
.el-menu--horizontal .el-menu .el-menu-item:hover {
  background: rgb(255, 255, 255);
}
.el-menu--popup-bottom-start {
  width: 140px;
  margin-top: 5px;
  backdrop-filter: blur(15px);
  //background: rgba(169, 169, 169, 0.418);
}
.el-menu--popup {
  min-width: 140px;
  font-weight: bold;
  text-align: center;
}
/*********头部导航栏********/
// 个人中心
.headBox {
  .haslogin {
    float: right; /* 使用 float 属性让其在最右侧显示 */
    position: relative; /* 使用 position 属性让下拉菜单相对于该元素定位 */
    margin-top: 18px;
    font-size: 18px;
    color: white;
    font-weight: bold;
  }
  .haslogin-info {
    text-align: center;
    width: 100px;
    background: rgba(241, 241, 241, 0.712);
    display: none; /* 初始将下拉菜单隐藏 */
    position: absolute; /* 绝对定位 */
    top: 100%; /* 相对于父元素的底部位置 */
    right: 0; /* 相对于父元素的右侧位置 */
    z-index: 1; /* 设置 z-index 属性，确保菜单位于其他元素之上 */
    li {
      margin-top: 15px;
      // margin-bottom: 50px;
    }
  }
  .haslogin:hover .haslogin-info {
    display: block; /* 鼠标移动到 .haslogin 元素上时将下拉菜单显示出来 */
  }
}
.haslogin-info li:hover {
  background: rgb(142, 150, 153);
}
.carousel-image {
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 5%; /* 设置高度占宽度的比例，这里设置为高度为宽度的 0.6 倍 */
  background-position: center center; /* 设置背景图片位置 */
  background-repeat: no-repeat; /* 禁止背景图片重复 */
  background-size: cover; /* 设置图片尺寸 */
}
.carousel-image {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 控制图片填充方式 */
    display: block;
  }
}

.carousel-title {
  text-align: center;
  font-size: 6vw;
  line-height: 550px;
  color: rgb(255, 255, 255);
  text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
}

// 轮播图css
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel .el-carousel__container {
  height: 680px; /* 将 el-carousel 高度设置为 100% */
}

/* 当屏幕宽度小于等于 768px 时 */
@media (max-width: 768px) {
  .el-carousel .el-carousel__container {
    height: 300px;
  }
  .title {
    display: block;
  }
  .carousel-title {
    text-align: center;
    font-size: 6vw;
    line-height: 300px;
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
  }
}

.headBack {
  width: 100%;
  background: rgba(194, 194, 194, 0.445);
  height: 60px;
  /*margin-bottom:30px;*/
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 100;
  backdrop-filter: blur(15px);
}

.headBox ul li.el-menu-item,
.headBox ul li.el-menu-item.is-active {
  height: 60px;
}

.headBox .el-menu {
  background: transparent;
  border-bottom: none !important;
}

.headBox ul li.el-menu-item,
.headBox ul li.el-menu-item.is-active,
.headBox ul li.el-menu-item:hover,
.headBox .el-submenu div.el-submenu__title,
.headBox .el-submenu__title i.el-submenu__icon-arrow {
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}

.headBox > ul .el-submenu .el-menu,
.headBox > ul .el-submenu .el-menu .el-menu-item {
  background: rgba(180, 180, 180, 0.5);
  backdrop-filter: blur(15px);
}

.el-menu-item i {
  color: #ffffff;
  font-size: 18px;
}
.el-submenu__title i {
  font-size: 18px;
  color: #ffffff;
}
.el-submenu__title {
  font-weight: bold;
  font-size: 1rem;
  color: rgb(0, 0, 0);
}
.el-menu-item span {
  font-weight: bold;
  color: rgb(0, 0, 0);
  font-size: 1rem;
}
/*pc搜索框*/

/*******移动端*******/

.mobileBox {
  position: relative;
  height: 60px;
  line-height: 38px;
  color: rgb(0, 0, 0);
  .haslogin i {
    margin-left: 25px;
  }
  .haslogin ul li {
    margin-left: 25px;
  }
}

.hideMenu {
  position: relative;
  width: 100%;
  height: 100%;
  line-height: 38px;
}

.hideMenu ul.mlistmenu {
  width: 100%;
  position: absolute;
  left: 0;
  top: 100%;
  box-sizing: border-box;
  z-index: 999;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 8px 0 rgba(0, 0, 0, 0.04);
  background: #48456c;
  color: #fff;
  border-right: none;
}

.hideMenu .el-submenu .el-menu {
  background: #64609e;
}

.hideMenu .el-menu-item,
.hideMenu .el-submenu__title {
  color: #fff;
}

.hideMenu > i {
  position: absolute;
  left: 10px;
  top: 12px;
  width: 30px;
  height: 30px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}

.hideMenu .el-menu-item,
.el-submenu__title {
  height: 40px;
  line-height: 40px;
}

.mobileBox .searchBox {
  padding-left: 40px;
  width: 100%;
  box-sizing: border-box;
}

.mobileBox .searchBox .el-input__inner {
  display: block;
  border-radius: 2px;
  border: none;
  height: 25px;
}

.hideMenu ul.mlistmenu.pshow {
  display: block;
}

.hideMenu ul.mlistmenu .el-submenu__icon-arrow,
.mobileBox li.el-menu-item a {
  color: #fff;
}

.hideMenu > ul li.el-menu-item:hover,
.hideMenu > ul li.el-menu-item.is-active {
  background: #47c4d4;
}
.mobileBox .el-menu {
  width: 50%;
  background: rgba(190, 190, 190, 0.829);
  margin-left: -10px;
  margin-top: -1px;
  backdrop-filter: blur(15px);
}

/*头部背景图*/

.headImgBox {
  height: 500px;
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
  margin-bottom: 90px;
  .carousel-image {
    height: 550px;
  }
}
@media (max-width: 576px) {
  .headImgBox .carousel-image {
    height: 300px;
  }
}
.img-class {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}

.headImgBox {
  h1 {
    font-size: 6vw;
    line-height: 1.2;
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
  }
}
</style>
